<template>
  <div class="page-container">
    <el-card class="box-card">
      <el-table :data="list" size="small" class="table-box" table-layout="fixed">
        <el-table-column label="" align="center">
          <template v-slot="{row}">
            <span style="margin-right: 10px">{{row.name}}</span>
            <el-button icon="ele-CopyDocument" size="small" @click="copyText(row)" class="bgBtn">复制</el-button>
            <el-button type="primary" icon="ele-Edit" size="small" @click="editMatterName(row)" class="bgBtn">重命名</el-button>
          </template>
        </el-table-column>
        <el-table-column label="开启使用"  align="center">
          <template v-slot="{row}">
            <el-switch v-model="row.use" :active-value="1" size="small" @click="changeUse(row)"/>
          </template>
        </el-table-column>
        <el-table-column label="开启审批" align="center">
          <template v-slot="{row}">
            <el-switch v-model="row.approve" :active-value="1" size="small" @click="changeApprove(row)"/>
          </template>
        </el-table-column>
        <el-table-column label="完成时间" align="center">
          <template v-slot="{row}">
            <el-switch v-model="row.completeDateSetup" :active-value="1" active-text="自动完成" inactive-text="手动完成" size="small" @click="changeCompleteDate(row)"/>
          </template>
        </el-table-column>
        <el-table-column label="关联" align="center">
          <template v-slot="{row}">
            <div class="layout-container">
              <div class="table-add-association" @click="openMatterSetup">
                <el-icon><ele-Plus /></el-icon>
              </div>
              <div class="association-label">
                <el-tag v-for="item in row.association" size="small">{{item}}</el-tag>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="事项设置" v-model="matterSetupVisible" width="480px" :close-on-click-modal="false">
      <el-tree
          ref="matterSetupRef"
          node-key="id"
          default-expand-all
          :data="treeData"
          :expand-on-click-node="false"
          :check-on-click-node="true"
          :props="defaultProps"
          show-checkbox
          @node-click="nodeCheck">
      </el-tree>
      <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="matterSetupVisible = false">关闭</el-button>
            <el-button size="small" type="primary" icon="ele-Check" @click="submitMatterSetup">保存</el-button>
          </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {reactive, toRefs, ref} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: "index",
  setup() {
    const state = reactive({
      matterSetupVisible:false,
      defaultProps:{
        children: 'children',
        label: 'label',
        disabled: 'disabled'
      },
      treeData:[
        {
          id: 2,
          label: '公共',
          isPenultimate: false,
          disabled: true,
          children: [
            {
              id: 5,
              label: '人事',
              isPenultimate: false,
              disabled: true,
              children: [{
                id: 10,
                label: '菜单1',
                personal: 1,    // 个人
                isPenultimate: false,
              },{
                id: 11,
                label: '菜单2',
                personal: 1,    // 个人
                isPenultimate: false,
              }]
            },
            {
              id: 5,
              label: '客户管理',
              isPenultimate: false,
              disabled: true,
              children: [{
                id: 10,
                label: '菜单3',
                personal: 1,    // 个人
                isPenultimate: false,
              },{
                id: 11,
                label: '菜单4',
                personal: 1,    // 个人
                isPenultimate: false,
              }]
            },

          ],
        }
      ],
      list:[
        {
          id:1,
          name:'报价单',
          use:1, //0->否 1->是
          approve:0, //0->否 1->是
          completeDateSetup:1,//0->手动 1->自动
          association:[]
        },
        {
          id:1,
          name:'采购单',
          use:1, //0->否 1->是
          approve:1, //0->否 1->是
          completeDateSetup:1,//0->手动 1->自动
          association:[]
        },
        {
          id:1,
          name:'回款单',
          use:1, //0->否 1->是
          approve:1, //0->否 1->是
          completeDateSetup:0,//0->手动 1->自动
          association:[]
        }
      ],
    })

    //复制文本
    const copyText = (row) => {
      navigator.clipboard.writeText(row.name).then(function() {
        //复制成功
        console.log("复制成功")
      },function() {
        //复制失败 使用旧版
        const textarea = document.createElement('textarea');
        textarea.value = row.name;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');//被弃用 但是兼容
        document.body.removeChild(textarea);
      })
      ElMessage.success("复制成功")
    }
    //重命名事务名称
    const editMatterName = (row) => {
      ElMessageBox.prompt('请输入新的事务名称', '修改事务名称', {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        inputPlaceholder:row.name
      }).then(({ value }) => {
        //修改...
      }).catch(() => {
        //点击了取消
      })
    }
    //修改是否开启使用
    const changeUse = (row) => {
      ElMessage.success("修改成功")
    }
    //修改是否开启审批
    const changeApprove = (row) => {
      ElMessage.success("修改成功")
    }
    //修改完成时间
    const changeCompleteDate = (row) => {
      ElMessage.success("修改成功")
    }
    //选中node
    const nodeCheck = (node) => {
      console.log(node)
    }
    //提交事项设置
    const submitMatterSetup = () => {

    }
    //打开事项设置选项
    const openMatterSetup = () => {
      state.matterSetupVisible = true
    }

    return{
      ...toRefs(state),
      copyText,
      editMatterName,
      changeUse,
      changeApprove,
      changeCompleteDate,
      nodeCheck,
      submitMatterSetup,
      openMatterSetup,

    }
  }
}
</script>

<style scoped lang="scss">
.page-container {
  .table-box {
    background: #fff;
    margin-top: 10px;

    :deep(.el-table__header-wrapper .el-table__cell) {
      background: var(--el-color-primary-light-9);
      color: var(--next-bg-menuBar-light-1);
    }

    :deep(thead .cell) {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :deep(thead .el-icon) {
      margin-top: -2px;
      cursor: pointer;
    }

    .primary {
      cursor: pointer;
      color: var(--el-color-primary);
    }

    .layout-container{
      display: flex;
      justify-content: center;

      .table-add-association{
        width: 50px;
        cursor: pointer;
      }
      .table-add-association:hover{
        color: black;
      }
    }

  }
}
</style>
